<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <link rel="dns-prefetch" href="//litten.me">
  <title>Litten的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="日语50音
    
    /*main*/              html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockqu">
<meta property="og:type" content="website">
<meta property="og:title" content="Litten的博客">
<meta property="og:url" content="//litten.me/assets/demo/border1px.html">
<meta property="og:site_name" content="Litten的博客">
<meta property="og:description" content="日语50音
    
    /*main*/              html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockqu">
<meta property="og:updated_time" content="2016-09-30T14:42:26.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Litten的博客">
<meta name="twitter:description" content="日语50音
    
    /*main*/              html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockqu">
  
    <link rel="alternative" href="/atom.xml" title="Litten的博客" type="application/atom+xml">
  
  
    <link rel="icon" href="/assets/img/favicon.ico">
  
  <link rel="stylesheet" href="/main.css?v=4.0.0.css">
  

</head>

<body>
  <div id="container" q-class="show:isCtnShow">
    <canvas id="anm-canvas" class="anm-canvas"></canvas>
    <div class="left-col" q-class="show:isShow">
      <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			<img src="/assets/blogImg/litten.png" class="js-avatar">
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/">Litten</a></h1>
		</hgroup>

		
		<p class="header-subtitle">胆小认生，不易相处</p>
		

		<nav class="header-menu">
			<ul>
			
				<li><a href="/">主页</a></li>
	        
				<li><a href="/photos">相册</a></li>
	        
			</ul>
		</nav>
		<nav class="header-smart-menu">
	        
    		
    			
    			<a data-idx="0" q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
    			
    			
            
    			
            
    			
    			<a data-idx="1" q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
    			
    			
            
		</nav>
		<nav class="header-nav">
			<div class="social">
				
					<a class="github" target="_blank" href="https://github.com/litten" title="github"><i class="icon-github"></i></a>
		        
					<a class="weibo" target="_blank" href="http://weibo.com/litten225" title="weibo"><i class="icon-weibo"></i></a>
		        
					<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
		        
			</div>
		</nav>
	</header>		
</div>

    </div>
    <div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"><i class="icon-sort"></i></div>
  		<h1 class="header-author js-mobile-header hide">Litten</h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img src="/assets/blogImg/litten.png" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author">Litten</h1>
			</hgroup>
			
			<p class="header-subtitle">胆小认生，不易相处</p>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/photos">相册</a></li>
		        
		        
		        	<li><a href="/archives">所有文章</a></li>
		        
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
						<a class="github" target="_blank" href="https://github.com/litten" title="github"><i class="icon-github"></i></a>
			        
						<a class="weibo" target="_blank" href="http://weibo.com/litten225" title="weibo"><i class="icon-weibo"></i></a>
			        
						<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
			        
				</div>
			</nav>
		</header>				
	</div>
</nav>

      <div id="wrapper" class="body-wrap">
        <div class="menu-l">
          <div class="canvas-wrap">
            <canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1" class="anm-canvas"></canvas>
          </div>
          <div id="js-content" class="content-ll">
            <article id="page-undefined" class="article article-type-page " itemscope itemprop="blogPost">
  <div class="article-inner">
    
    <div class="article-entry" itemprop="articleBody">
      
        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">
    <title>日语50音</title>
    <style type="text/css">
    /*main*/              html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,menu{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}html,body{-webkit-text-size-adjust:none;-webkit-touch-callout:none;vertical-align:middle;font-size:16px;background:#e6e6e6;position:relative;height:100%;font-family:Tahoma,Arial,"Microsoft Yahei",sans-serif}.clearfix:after{content:" ";display:block;clear:both;visibility:hidden;line-height:0;height:0}input::-webkit-input-placeholder{color:#aaa}a,div{-webkit-tap-highlight-color:rgba(0,0,0,0)}a,a:active,a:hover{color:#0057af;text-decoration:none}header,.header{width:215px;height:58px;background:url(http://3.url.cn/qun/create_iphone/img/sprite.png) no-repeat transparent 0 0;color:#fff;line-height:58px;padding-left:64px;font-size:24px;-webkit-transform:scale(0.82) scale(0.82);-webkit-transform-origin:0 50%}.input-group{overflow:hidden;vertical-align:middle;line-height:16px;background-color:#fff;}#main-section{position:relative;height:100%;min-height:370px;overflow:hidden;}.input-group label{width:100px;padding:10px 0 10px 12px;display:inline-block;border-right:0;float:left;color:gray;-webkit-appearance:none;height:24px;line-height:24px;}.input-group .ui-select{margin-left:115px;padding:10px 24px 10px 15px;position:relative;}.input-group .select-btn{width:100%;height:24px;line-height:24px;color:#aaa;}.input-group .select-btn span.ui-text{text-align:right;display:inline-block;width:100%;white-space:nowrap;overflow:inherit;text-overflow:ellipsis;pointer-events:none;}.input-group .select-btn span.ui-icon{display:inline-block;position:absolute;top:50%;margin:-10px 0 0 -3px;width:18px;height:20px;right:7px;}.input-group .select-btn span.ui-icon .arrow{width:18px;height:18px;position:relative;display:inline-block;float:right;background:transparent;margin-right:-5px;margin-top:1px;}.input-group .select-btn span.ui-icon .arrow div{background:#ccc;position:absolute;width:3px;height:12px;}.input-group .select-btn span.ui-icon .arrow div.arrow1{left:19px;top:12px;-webkit-transform:rotate(-45deg) translate(0,-142%);}.input-group .select-btn span.ui-icon .arrow div.arrow2{left:-5px;top:19px;-webkit-transform:rotate(45deg) translate(0,-142%);}.seg-words{color:#6d6d72;height:20px;font-size:1em;text-shadow:0 1px #fff;padding:3px 0 6px 14px;}
                
         /*border-1px 部分*/
         .border-1px{
              position: relative;
         }
        .border-1px:before, .border-1px:after{
            border-top: 1px solid #c8c7cc;
            content: ' ';
            display: block;
            width: 100%;
            position: absolute;
            left: 0;
        }
        .border-1px:before{
            top: 0;
            display: none;
        }
        .border-1px:after{
            bottom: 0;
        }
         @media (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio: 1.5){
          .border-1px:after,.border-1px:before{
              -webkit-transform: scaleY(.7);
              -webkit-transform-origin: 0 0;
              transform: scaleY(.7);
            }
             .border-1px:after{
              -webkit-transform-origin: left bottom;
            }
        }

        @media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio: 2){
          .border-1px:after,.border-1px:before{
              -webkit-transform: scaleY(.5);
              transform: scaleY(.5);
          }
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="main-section">
            <p class="seg-words">あ行</p>
            <!-- あ行 -->
            <div class="input-group border-1px">
                <label for="group-class">あ ア</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(a)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px border-1px">
                <label for="group-class">い イ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(i)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">う ウ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(u)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">え エ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(e)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">お オ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(o)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <!-- か行 -->
            <p class="seg-words">か行</p>
            <div class="input-group border-1px">
                <label for="group-class">か カ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ka)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">き キ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ki)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">く ク</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ku)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">け ケ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ke)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">こ コ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ko)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>

            <!-- さ行 -->
            <p class="seg-words">さ行</p>
            <div class="input-group border-1px">
                <label for="group-class">さ サ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(sa)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">し シ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(shi)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">す ス</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(su)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">せ セ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(se)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">そ ソ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(so)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>

            <!-- た行 -->
            <p class="seg-words">た行</p>
            <div class="input-group border-1px">
                <label for="group-class">た タ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ta)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">ち チ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(chi)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">つ ツ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(tsu)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">て テ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(te)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">と ト</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(to)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>

            <!-- な行 -->
            <p class="seg-words">な行</p>
            <div class="input-group border-1px">
                <label for="group-class">な ナ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(na)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">に ニ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ni)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">ぬ ヌ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(nu)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">ね ネ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ne)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">の ノ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(no)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>

            <!-- は行 -->
            <p class="seg-words">は行</p>
            <div class="input-group border-1px">
                <label for="group-class">は ハ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ha)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">ひ ヒ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(hi)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">ふ フ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(fu)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">へ ヘ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(he)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">ほ ホ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ho)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>

            <!-- ま行 -->
            <p class="seg-words">ま行</p>
            <div class="input-group border-1px">
                <label for="group-class">ま マ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ma)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">み ミ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(mi)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">む ム</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(mu)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">め メ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(me)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">も モ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(mo)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>

            <!-- や行 -->
            <p class="seg-words">や行</p>
            <div class="input-group border-1px">
                <label for="group-class">や ヤ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ya)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">い イ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(i)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">ゆ ユ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(yu)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">え エ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(e)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">よ ヨ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(yo)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>

            <!-- ら行 -->
            <p class="seg-words">ら行</p>
            <div class="input-group border-1px">
                <label for="group-class">ら ラ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ra)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">り リ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ri)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">る ル</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ru)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">れ レ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(re)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">ろ ロ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(ro)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>

            <!-- わ行 -->
            <p class="seg-words">わ行</p>
            <div class="input-group border-1px">
                <label for="group-class">わ ワ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(wa)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">い イ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(i)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">う ウ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(u)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">え エ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(e)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
            <div class="input-group border-1px">
                <label for="group-class">を ヲ</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(wo)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>

            <!-- ン行 -->
            <p class="seg-words">ん</p>
            <div class="input-group border-1px">
                <label for="group-class">ん ン</label>
                <div class="ui-select">
                    <div class="select-btn">
                        <span class="ui-text">(n)</span>
                        <span class="ui-icon">
                            <div class="arrow">
                                <div class="arrow1"></div>
                                <div class="arrow2"></div>
                            </div>
                        </span>
                    </div>
                    <div id="group-class" class="ui-select-holder" data-catalog="0"></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
      

      

      
        
<div class="share-btn share-icons tooltip-left">
  <div class="tooltip tooltip-east">
    <span class="tooltip-item">
      <a href="javascript:;" class="share-sns share-outer">
        <i class="icon icon-share"></i>
      </a>
    </span>
    <span class="tooltip-content">
      <div class="share-wrap">
        <div class="share-icons">
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="icon icon-weibo"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="icon icon-weixin"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="icon icon-qq"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="icon icon-douban"></i>
          </a>
          <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a>
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="icon icon-facebook"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="icon icon-twitter"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="icon icon-google"></i>
          </a>
        </div>
      </div>
    </span>
  </div>
</div>

<div class="page-modal wx-share js-wx-box">
    <a class="close js-modal-close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="" alt="微信分享二维码">
    </div>
</div>

<div class="mask js-mask"></div>
      
      <div class="clearfix"></div>
    </div>
  </div>
</article>

  





<div class="duoshuo">
	<!-- 多说评论框 start -->
	<div class="ds-thread" data-thread-key="undefined" data-title="" data-url="//litten.me/assets/demo/border1px.html"></div>
	<!-- 多说评论框 end -->
	<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
	<script type="text/javascript">
	var duoshuoQuery = {short_name:"litten-hexo"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
	</script>
	<!-- 多说公共JS代码 end -->
</div>





          </div>
        </div>
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
    	<div class="footer-left">
    		&copy; 2016 Litten
    	</div>
      	<div class="footer-right">
      		<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
      	</div>
    </div>
  </div>
</footer>
    </div>
    <script>
	var yiliaConfig = {
		mathjax: false,
		isHome: false,
		isPost: false,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: true,
		root: "/",
		innerArchive: true
	}
</script>

<script src="/./main.js?v=4.0.0.js"></script>


    
<div class="tools-col" q-class="show:isShow,hide:isShow|isFalse" q-on="click:stop(e)">
  <div class="tools-wrap">
    
    	<section class="tools-section tools-section-all" q-show="innerArchive">
        <div class="search-wrap">
          <input class="search-ipt" q-model="search" type="text" placeholder="find something…">
          <i class="icon-search icon" q-show="search|isEmptyStr"></i>
          <i class="icon-close icon" q-show="search|isNotEmptyStr" q-on="click:clearChose(e)"></i>
        </div>
        <div class="widget tagcloud search-tag">
          <p class="search-tag-wording">tag:</p>
          <label class="search-switch">
            <input type="checkbox" q-on="click:toggleTag(e)" q-attr="checked:showTags">
          </label>
          <ul class="article-tag-list" q-show="showTags">
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">js</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">html5</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">设计</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">杂谈</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">游戏</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">旧事</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">coffeescript</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">web</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">旅行</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">css</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">css3</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">工具</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">chrome</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">生活</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">安全</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">黑科技</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">octopress</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">浏览器</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">主题</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">hexo</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">经验</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">产品</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">前端</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">github</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">药别停</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">模式</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">性能</a>
              </li>
            
            <div class="clearfix"></div>
          </ul>
        </div>
        <ul class="search-ul">
          <p q-show="jsonFail" style="padding: 20px; font-size: 12px;">
            缺失模块。<br/>1、在博客根目录（注意不是yilia根目录）执行以下命令：<br/> npm i hexo-generator-json-content --save<br/><br/>
            2、在根目录_config.yml里添加配置：
<pre style="font-size: 12px;" q-show="jsonFail">
  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true
</pre>
          </p>
          <li class="search-li" q-repeat="items" q-show="isShow">
            <a q-attr="href:path|urlformat" class="search-title"><i class="icon-quo-left icon"></i><span q-text="title"></span></a>
            <p class="search-time">
              <i class="icon-calendar icon"></i>
              <span q-text="date|dateformat"></span>
            </p>
            <p class="search-tag">
              <i class="icon-price-tags icon"></i>
              <span q-repeat="tags" q-on="click:choseTag(e, name)" q-text="name|tagformat"></span>
            </p>
          </li>
        </ul>
    	</section>
    

    

    
    	<section class="tools-section tools-section-me" q-show="aboutme">
  	  	
  	  		<div class="aboutme-wrap" id="js-aboutme">Litten，&lt;br&gt;毕业于华科，就职于鹅厂&lt;br&gt;&lt;br&gt;热爱大海与冷笑话，&lt;br/&gt;目前是一枚前端&lt;br/&gt;&lt;br/&gt;胆小认生，不易相处，&lt;br&gt;年轻无为，卖马为生。</div>
  	  	
    	</section>
    
  </div>
  
</div>
    <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
  </div>
</body>
</html>